<template>
  <div>
    <h1>app</h1>
    <button @click="cname = 'TsNews'">TsNews</button>
    <button @click="cname = 'TsPlay'">TsPlay</button>
    <button @click="cname = 'TsShop'">TsShop</button>
    <!-- <keep-alive>
      <component :is="cname"></component>
    </keep-alive> -->
    <!-- <keep-alive include="TsShop,TsNews"> -->
    <!-- <keep-alive :include="['TsShop', 'TsNews']"> -->
    <!-- <keep-alive :exclude="['TsShop', 'TsNews']"> -->
    <keep-alive :max="2">
      <TsNews v-if="cname === 'TsNews'"></TsNews>
      <TsPlay v-if="cname === 'TsPlay'"></TsPlay>
      <TsShop v-if="cname === 'TsShop'"></TsShop>
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cname: 'TsNews',
    };
  },
  methods: {},
}
</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>